import React,{useState} from 'react';
import {Button, Form, Input} from "antd";
import {LockOutlined, UserOutlined} from "@ant-design/icons";
import './style/index.css'
import CryptoJS from 'crypto-js'
import {Navigate} from "react-router-dom";
import {post} from "../../service";

function Login(props) {
    const [logined, setLogined] = useState(false);

    const onLogin=(values)=>{
        post('/api/login', {...values,password:CryptoJS.AES.encrypt(values.password,'12345678').toString()}).then(res=>{
            setLogined(true)
            sessionStorage.setItem('token',res.token)
        })
    }
    return (
        <div className="m-login">
            <Form onFinish={onLogin}>
                <h4>登录</h4>
                <Form.Item name={"account"} rules={[{required:true,message:'请输入用户名'}]}>
                    <Input prefix={<UserOutlined/>} placeholder="请输入用户名" />
                </Form.Item>
                <Form.Item name={"password"} rules={[{required:true,message:'请输入密码'}]}>
                    <Input type={"password"} prefix={<LockOutlined/>} placeholder="请输入用户名" />
                </Form.Item>
                <Form.Item>
                     <Button block type='primary' htmlType='submit'>登录</Button>
                </Form.Item>
            </Form>
            {logined&&<Navigate to={'/'}/>}
        </div>
    );
}

export default Login;
